<template>
  <div class="AddDoctor">
    <!--    面包屑-->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '' }">医院信息管理</el-breadcrumb-item>
      <el-breadcrumb-item :to="{ path: '/doctor' }"
        >医生管理
      </el-breadcrumb-item>
      <el-breadcrumb-item :to="{ path: '/addDoctor' }"
        >新增医生
      </el-breadcrumb-item>
    </el-breadcrumb>
    <div class="doctorMsg">
      <h3 class="">基本信息</h3>
      <div class="addMain">
        <el-form
          :model="addDoctorForm"
          ref="numberValidateForm"
          label-width="100px"
          class="demo-ruleForm"
        >
          <el-row :gutter="10">
            <el-col :xs="8" :sm="6" :md="4" :lg="3" :xl="1">
              <div class="grid-content bg-purple"></div>
            </el-col>
            <el-col :xs="4" :sm="6" :md="8" :lg="9" :xl="11">
              <div>
                <el-form-item
                  label="医生名称"
                  prop="doName"
                  :rules="[{ required: true, message: '医生名称不能为空' }]"
                >
                  <el-input
                    placeholder="请输入医生名称"
                    v-model="addDoctorForm.doName"
                    autocomplete="off"
                  ></el-input>
                </el-form-item>
                <el-form-item
                  label="医生性别"
                  prop="doSex"
                  :rules="[{ required: true, message: '医生性别不能为空' }]"
                >
                  <el-select
                    v-model="addDoctorForm.doSex"
                    placeholder="请选择医生性别"
                    style="width: 100%"
                  >
                    <el-option
                      v-for="item in doSexList"
                      :key="item.id"
                      :label="item.lable"
                      :value="item.sex"
                    ></el-option>
                  </el-select>
                </el-form-item>
                <el-form-item
                  label="医生电话"
                  prop="phone"
                  :rules="[{ required: true, message: '医生电话不能为空' }]"
                >
                  <el-input
                    placeholder="请输入医生联系电话"
                    v-model="addDoctorForm.phone"
                    autocomplete="off"
                  ></el-input>
                </el-form-item>
                <el-form-item
                  label="所属医院"
                  prop="doSex"
                  :rules="[{ required: true, message: '所属医院不能为空' }]"
                >
                  <el-select
                    v-model="addDoctorForm.doHospitalId"
                    placeholder="请选择所属医院"
                    style="width: 100%"
                  >
                    <el-option
                      v-for="item in doHospitalIdList"
                      :key="item.id"
                      :label="item.lable3"
                      :value="item.Hospital"
                    ></el-option>
                  </el-select>
                </el-form-item>
                <el-form-item
                  label="医生职称"
                  prop="doJob"
                  :rules="[{ required: true, message: '医生地址不能为空' }]"
                >
                  <el-input
                    placeholder="请输入医生职称"
                    v-model="addDoctorForm.doJob"
                    autocomplete="off"
                  ></el-input>
                </el-form-item>
              </div>
              <div class="grid-content bg-purple-light"></div>
            </el-col>
            <el-col :xs="4" :sm="6" :md="8" :lg="9" :xl="11">
              <div>
                <el-form-item
                  label="科室"
                  prop="doDepartmentId"
                  :rules="[{ required: true, message: '科室不能为空' }]"
                >
                  <el-input
                    placeholder="请输入科室"
                    v-model="addDoctorForm.doDepartmentId"
                    autocomplete="off"
                  ></el-input>
                </el-form-item>
                <el-form-item
                  label="从医经验"
                  prop="doExperience"
                  :rules="[{ required: true, message: '从医经验不能为空' }]"
                >
                  <el-input
                    placeholder="请输入从医经验"
                    v-model="addDoctorForm.doExperience"
                    autocomplete="off"
                  ></el-input>
                </el-form-item>
                <el-form-item
                  label="账号角色"
                  prop="doCharacter"
                  :rules="[{ required: true, message: '账号角色不能为空' }]"
                >
                  <el-select
                    v-model="addDoctorForm.doCharacter"
                    placeholder="请选择角色类别"
                    style="width: 100%"
                  >
                    <el-option
                      v-for="item in doCharacterList"
                      :key="item.id"
                      :label="item.lable2"
                      :value="item.Character"
                    ></el-option>
                  </el-select>
                </el-form-item>
                <el-form-item
                  label="医生类型"
                  prop="doType"
                  :rules="[{ required: true, message: '医生类型不能为空' }]"
                >
                  <el-input
                    placeholder="请输入医生类型"
                    v-model="addDoctorForm.doType"
                    autocomplete="off"
                  ></el-input>
                </el-form-item>
              </div>
              <div class="grid-content bg-purple"></div>
            </el-col>
            <el-col :xs="8" :sm="6" :md="4" :lg="3" :xl="1">
              <div class="grid-content bg-purple-light"></div>
            </el-col>
          </el-row>
          <!-- 返回 -->
          <el-form-item class="center">
            <div>
              <el-button @click="hosBackBtn">返回</el-button>
              <el-button type="primary" @click="adddoctorBtn('addDoctorForm')"
                >保存</el-button
              >
            </div>
          </el-form-item>
        </el-form>
      </div>
    </div>
  </div>
</template>

<script>
import { mapGetters, mapActions } from "vuex";

export default {
  name: "Adddoctor",
  computed: {},
  data() {
    return {
      doSexList: [
        {
          sex: "男",
          label: "男",
        },
        {
          sex: "男",
          lable: "女",
        },
      ],
      doSex: "",
      doHospitalIdList: [
        {
          Hospital: "1",
          lable3: "北京癫痫医院",
        },
        {
          Hospital: "3",
          lable3: "上海癫痫医院",
        },
      ],
      doHospitalId: "",
      doCharacterList: [
        {
          Character: "vip",
          label2: "vip",
        },
        {
          Character: "svip",
          lable2: "svip",
        },
      ],
      doCharacter: "",
      addDoctorForm: {
        doCharacter: "",
        doName: "",
        phone: "",
        doHospitalId: "",
        doJob: "",
        doType: "",
        doSex: "",
        doExperience: "",
        doDepartmentId: "",
        doCharacter: "",
      },
    };
  },
  methods: {
    adddoctorBtn() {
      this.$service.doctorService.addDoctor(this.addDoctorForm).then((res) => {
        console.log(res);
        if (res.data.code == 200) {
          this.$message({
            showClose: true,
            message: "添加成功",
            type: "success",
          });
          this.$router.push("/doctor");
        } else {
          this.$message.error("添加失败");
        }
      });
    },
    hosBackBtn() {
      this.$router.push("/doctor");
    },
  },
};
</script>

<style scoped lang="less">
.el-col {
  border-radius: 4px;
}

.grid-content {
  border-radius: 4px;
  min-height: 36px;
}

.center {
  display: flex;
  justify-content: center;
  margin: 40px;
}
</style>
